<template>
    <div class="zhibo">
        <div class="topimg marginBt" ref="swiperContent">
            <div class="img-desc">
                <h2 class="title white">4G视频传输黑科技</h2>
                <p class="text white">直啵，为婚礼直播提供简单而专业的解决方案</p>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="wedding-experience page-wapper marginBt" ref="weddingExperience">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">TVU全球最大移动视频传输设备制造商</h2>
                <p class="text">上海通维数码科技</p>
                <p class="textEng savoye">Beyond Transmission</p>
            </div>
            <div class="imgBox">
                <img class="auto-img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/fa79bb0b036c4eaa8489318db8939e84.png" alt="">
                <p style="text-align:center;font-size:18px;color:#404040;line-height:30px;margin:20px auto 50px;width:70%;"> TVU Networks是全球IP直播视频解决方案领域的领导者，总部位于在美国硅谷。目前在全球设有20+办事处，服务于全球超过85个国家2500个各种规模的客户。TVU已为大量的全球大型事件的直播活动提供高清画面传输，包括世界杯足球赛，夏季和冬季奥运会，美国总统大选，各类自然灾害报道以及一些国际重大体育赛事直播。</p>
                <p style="text-align:center;font-size:18px;">www.tvunetworks.cn</p>
            </div>
        </div>
        <div class="wedding-experience page-wapper marginBt" ref="weddingExperience">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">无需下载APP 一键观看</h2>
                <p class="text">多款滤镜 专人实时剪辑<br>一键分享 秀出婚礼幸福</p>
                <p class="textEng savoye">Wedding, worth sharing in real time</p>
            </div>
            <div class="imgBox" style="width:580px;margin:0 auto;">
                <img class="auto-img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/0bf0024d248e4aa6b7a40b3a8182e8ec.png" alt="">
            </div>
        </div>
        <div class="wedding-experience page-wapper marginBt" ref="weddingExperience">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">高清画面 全球分享</h2>
                <p class="text">全网直播 引领潮流<br>无论何地 感受甜蜜</p>
                <p class="textEng savoye">Wedding, deserves to be blessed by everyone</p>
            </div>
            <div class="imgBox" style="width:840px;margin:0 auto;">
                <img class="auto-img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/985783b850fc4e94879323e32341dc5c.png" alt="">
            </div>
        </div>
        <div class="wedding-experience page-wapper marginBt" ref="weddingExperience">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">多机位切换 异地连线</h2>
                <p class="text">婚礼画面 不止单一镜头 多个角度 让爱幸福过人</p>
                <p class="textEng savoye">Wedding, worthy of being surrounded by the lens</p>
            </div>
            <div class="imgBox" style="width:840px;margin:0 auto;">
                <img class="auto-img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/d789ff337c414db198d396e6e69baf13.png" alt="">
            </div>
        </div>
        <div class="partanerBox page-wapper marginBt">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">全球战略合作伙伴</h2>
                <p class="text">大疆、索尼、松下</p>
                <p class="textEng savoye">Dajiang, Sony, Panasonic</p>
            </div>
            <div class="imgBox">
                <ul class="clear" style="text-align: center;display:flex;justify-content:center;align-items:center;">
                    <li class="liList" v-for="(item, index) in partanerArr" :key="index">
                        <img class="minImg" :src="item.imgSrc" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { config } from 'common/js/config';
export default {
    metaInfo: {
        title: '直啵官网',
        meta: [
            {
                name: '婚礼直啵',
                content: '直啵互动,云剪辑,多平台'
            },
            {
                name: '婚礼直播',
                content: '一款专为婚礼直播设计的在线应用小程序'
            }
        ]
    },
    data() {
        return {
            partanerArr: config.partanerArr // 红包礼物
        };
    },
    methods: {
        initial() {
            let wh = window.innerWidth;
            if (wh >= 768 && wh < 1400 && wh !== 828) {
            // PC端 宽度比例90%
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
            } else if (wh < 768 || wh === 828) {
            // 移动设备 828单独适配plus
                this.$refs.swiperContent.style.height = 1.7786 * wh + 'px';
            } else if (wh >= 1400 && wh < 1920) {
                // PC大屏 固定宽度
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
            } else {
                this.$refs.swiperContent.style.height = '860px';
            }
        }
    },
    mounted() {
        this.initial();
        window.addEventListener('resize', this.initial);
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
.zhibo
    .topimg
        background url("http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/3b6493057e8c490a986102bbf0b7a03d.png") no-repeat left top
@media screen and (max-width 767px)
    .zhibo
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            .text
                display none
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)
    .zhibo
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            .text
                display none
</style>
